// 自定义组件, 需要在 app 实例化前先把 todo 组件申明了来
Vue.component('todo', {
    props: ['item'],
    template: '<li>{{item.text}}</li>'
});

var app = new Vue({
    el     : '#app',
    data   : {
        prop      : 'inspect-me', // v-bind 添加属性
        message   : 'Hello', // {{ 表达式 }} or v-text or v-model
        reverses  : 'Hello Vue!',
        twoWayData: 'Two Way Bind!', // 双向绑定 v-model
        isShow    : true, // v-if 条件判断
        todos     : [
            {text: 'Learn JavaScript'},
            {text: 'Learn Vue'},
            {text: 'Build something awesome'}
        ], // v-for 循环
    },
    methods: {
        // v-on:xx or @xx
        reverseMessage: function () {
            app.reverses = app.reverses.split('').reverse().join('');
        },
        setData       : function () {
            app.twoWayData = 'haha!';
        }
    }
});
// 在浏览器的 console 控制台也可以直接通过 app.xx 控制
// 通过 app.message 可以直接获取
console.log(app.message);
// app.message 也可以直接赋值
app.message += ' Vue!';